.tree-list {
  // .tree-list__subtree > li > .tree-list__node {
  //   padding-left: 24px;
  // }

  .tree-list__node-wrap {
    display: flex;
    flex-flow: row nowrap;

    &:hover {
      background: color("gray-lighten-4");
    }

    .node-folding {
      position: relative;
      background: transparent;
      width: 24px;
      border: 0;
      outline: 0;
      cursor: pointer;

      &.icon {
        position: relative;
        color: rgba(color("gray-darken-1"), 0.8);

        &::before {
          position: absolute;
          font-family: "materialicon";
          font-size: 24px;
          font-weight: 400;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .tree-list__node {
      flex: 1;
      padding-left: 5px;
    }
  }

  .tree-list__node {
    display: block;
    padding: 12px 14px 10px;
    cursor: pointer;

    &::after,
    &.icon::before {
      position: absolute;
      font-family: "materialicon";
      font-size: 24px;
      font-weight: 400;
      top: 50%;
      transform: translateY(-50%);
    }

    &.node--selected {
      font-weight: 500;
      background: color("gray-lighten-4");

      &.icon::before {
        font-weight: inherit;
        color: theme-color("primary");
      }
    }

    &.icon {
      position: relative;
      padding: 12px 14px 10px 38px;

      &::before {
        color: rgba(color("gray-darken-1"), 0.8);
        left: 8px;
      }
    }
  }
}
